<template>
  <a-flex vertical :align="'flex-start'">
    <a-tooltip>
      <template #title>{{ file.path }}</template>
      <span class="content">{{ content }}</span>
    </a-tooltip>
    <a-progress v-if="file.selected" :percent="percent" style="margin: 0" />
  </a-flex>
</template>

<script setup lang="ts">
import type { File } from "@/stores/apis";
import { computed } from "vue";

const { file } = defineProps<{ file: File }>();

const percent = computed(() => {
  if (file.length == 0) {
    return 0;
  }
  return Math.floor((file.completed_length * 100) / file.length);
});

const content = computed(() => {
  const idx = file.path.lastIndexOf("/");
  if (idx > 0) {
    return file.path.slice(idx + 1);
  }
  return file.path;
});
</script>

<style scoped>
.content {
  max-width: 800px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
